<template>
    <div class="organization-add">
        <el-card class="box-card">
            <template #header>
                <pageTitle :title="'新增組織'" />
            </template>

            <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="组织名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入组织名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组织代码" prop="code">
                            <el-input v-model="form.code" placeholder="请输入组织代码" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="组织类型" prop="type">
                            <el-select v-model="form.type" placeholder="请选择组织类型" clearable>
                                <el-option v-for="item in orgTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="上级组织" prop="parent">
                            <el-select v-model="form.parent" placeholder="请选择上级组织" clearable>
                                <el-option v-for="item in parentOrgOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="组织负责人" prop="leader">
                            <el-input v-model="form.leader" placeholder="请输入组织负责人" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组织简称" prop="shortName">
                            <el-input v-model="form.shortName" placeholder="请输入组织简称" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="工作地点" prop="location">
                            <el-select v-model="form.location" placeholder="请选择工作地点" clearable>
                                <el-option v-for="item in locationOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工作城市" prop="city">
                            <el-cascader v-model="form.city" :options="cityOptions" placeholder="请选择省市区" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="编制人数" prop="staffCount">
                            <el-input-number v-model="form.staffCount" :min="0" placeholder="请输入编制人数"
                                controls-position="right" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组织状态" prop="status">
                            <el-switch v-model="form.status" active-text="启用" inactive-text="禁用" :active-value="1"
                                :inactive-value="0" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="组织描述" prop="description">
                            <el-input v-model="form.description" type="textarea" :rows="4" placeholder="请输入组织描述"
                                maxlength="200" show-word-limit />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24" class="text-right">
                        <el-button type="primary" @click="submitForm">保存</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import pageTitle from "@/components/pageTitle/pageTitle.vue"

const formRef = ref(null)

const form = reactive({
    name: "",
    code: "",
    type: "",
    parent: "",
    leader: "",
    shortName: "",
    location: "",
    city: [],
    staffCount: 0,
    status: 1,
    description: "",
})

const rules = {
    name: [{ required: true, message: "请输入组织名称", trigger: "blur" }],
    type: [{ required: true, message: "请选择组织类型", trigger: "change" }],
    parent: [
        { required: true, message: "请选择上级组织", trigger: "change" },
    ],
}

// 模拟数据
const orgTypeOptions = [
    { value: "1", label: "总公司" },
    { value: "2", label: "分公司" },
    { value: "3", label: "部门" },
    { value: "4", label: "小组" },
]

const parentOrgOptions = [
    { value: "1", label: "总公司" },
    { value: "2", label: "北京分公司" },
    { value: "3", label: "上海分公司" },
]

const locationOptions = [
    { value: "1", label: "总部大楼" },
    { value: "2", label: "科技园区" },
    { value: "3", label: "远程办公" },
]

const cityOptions = [
    {
        value: "beijing",
        label: "北京",
        children: [
            { value: "chaoyang", label: "朝阳区" },
            { value: "haidian", label: "海淀区" },
        ],
    },
    {
        value: "shanghai",
        label: "上海",
        children: [
            { value: "pudong", label: "浦东新区" },
            { value: "huangpu", label: "黄浦区" },
        ],
    },
]

const submitForm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            console.log("提交表单:", form)
        } else {
            console.log("表单验证失败")
            return false
        }
    })
}

const resetForm = () => {
    formRef.value.resetFields()
}

</script>

<style scoped>
.organization-add {
    padding: 20px;
}

.box-card {
    max-width: 1200px;
}

.text-right {
    text-align: right;
}

.el-row {
    margin-bottom: 20px;
}

.el-select,
.el-cascader {
    width: 100%;
}
</style>